<!--
	人才市场， 个人 & 团队
 -->
<template>
	<view class="talents">
		<view class="filters">
			<view class="sort">
				<view
					:class="activeIndex === 0 ? 'active' : ''"
					class="item"
					@click="activeIndex=0"
				>
					个人
				</view>
				<view
					:class="activeIndex === 1 ? 'active' : ''"
					class="item"
					@click="activeIndex=1"
				>
					团队
				</view>
			</view>
			<view class="search">
				<search-input
					:placeholder="activeIndex===0 ? '搜索用户' : '搜索团队'"
					v-model="searchText"
					@search="$router.navigateToChat(searchText)"
				/>
			</view>
		</view>
		<!-- 用户卡片 -->
		<view
			v-show="activeIndex===0"
			class="users"
		>
			<view
				class="user-card"
				:class="activeIndex === 0 ? 'first' : ''"
				v-for="user in arr_users"
				:key="user.userId"
				@click="$router.navigateToUserHome(user.userId)"
			>
				<aha-avatar
					:src="user.avatarUrl"
					size="50"
				/>
				<view class="right">
					<text class="name strong">{{user.nickname}}</text>
					<aha-user-level
						class="level"
						:point="user.totalContribPoint"
						small
						margin="0 3px 3px 0"
					/>
					<AhaTags
						class="tags"
						:tags="user.specialtyTags"
					/>
					<view class="footer">
						<view class="experience">
							<view
								:style="{
									'transform': `translateY(-${user.projectIndex*23}px)`
								}"
								class="item"
								v-for="(project,index) in user.projectInfo"
								:key="index"
							>
								{{project.name}} - {{project.awardLabel}}
							</view>
							<view
								class="item"
								v-if="user.projectInfo.length === 0"
							>
								无参与项目
							</view>
						</view>
						<view class="love">
							<text class="iconfont icon-collection" />
							<text>{{user.totalReceivedCollection}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 团队卡片 -->
		<view
			v-show="activeIndex===1"
			class="teams"
		>
			<view
				v-for="team in arr_teams"
				:key="team.id"
				@click="$router.navigateToTeamDetail(team.id)"
			>
				<team-card :team="team" />
			</view>
		</view>
		<view class="remark center small">{{ loadStatus }}</view>
	</view>
</template>

<script>
import { getTalents } from '@/api/user.js'
import { getTeams } from '@/api/team.js'
import TeamCard from '@/pages/Interflow/Team/components/TeamCard.vue'
import { PRIZE_LEVELS } from '@/static/staticData.js'
export default {
  components: {
    'team-card': TeamCard
  },
  data() {
    return {
      searchText: '',
      activeIndex: 0,
      obj_userLoadInfo: {
        pageNum: 1,
        pageSize: 10,
        is_loadAll: false
      },
      arr_users: [],
      obj_teamLoadInfo: {
        pageNum: 1,
        pageSize: 10,
        is_loadAll: false
      },
      arr_teams: [],
    }
  },
  computed: {
    /**
		 * 加载状态，根据activeIndex和两个is_loadAll判断
		 */
    loadStatus() {
      if (this.activeIndex === 0 && this.obj_userLoadInfo.is_loadAll) {
        return '已加载全部'
      }
      if (this.activeIndex === 1 && this.obj_teamLoadInfo.is_loadAll) {
        return '已加载全部'
      }
      return ''
    }
  },
  mounted() {
    this.loadTalent(true)
    this.loadTeams(true)
    /* 定时滚动卡片中项目情况 */
    setInterval(() => {
      this.arr_users.forEach((user, i) => {
        const index = user.projectIndex

        this.arr_users[ i ].projectIndex = index < user.projectInfo.length - 1 ? index + 1 : 0
      })
    }, 3000)
  },
  methods: {
    /**
		 * 触底加载
		 */
    reachBottom() {
      switch (this.activeIndex) {
        case 0:
          this.loadTalent()
          break
        case 1:
          this.loadTeams()
          break
      }
    },
    /**
		 * 加载用户
		 */
    async loadTalent(init = false) {
      try {

        if (init) {
          this.$loading()
          this.obj_userLoadInfo.is_loadAll = false
          this.obj_userLoadInfo.pageNum = 1
        }
        if (this.obj_userLoadInfo.is_loadAll) {
          return
        }
        const res = await getTalents({
          pageNum: this.obj_userLoadInfo.pageNum,
          pageSize: this.obj_userLoadInfo.pageSize
        })

        if (init) {
          this.arr_users = []
        }
        res.forEach(user => {
        /* 判断是否有用户标签，并进行分割 */
          if (!user.specialtyTags) {
            user.specialtyTags = ['']
          } else {
            user.specialtyTags = user.specialtyTags.split(',')
          }
          /* 用户默认项目下标 */
          user.projectIndex = 0
          // 项目情况,获取获奖名次
          for (let j = 0; j < user.projectInfo.length; j++) {
            user.projectInfo[ j ].awardLabel = PRIZE_LEVELS.find(prize => prize.value === user.projectInfo[ j ].awardLevel).label
          }
          this.arr_users.push(user)
        })
        /* 判断是否加载全部 */
        if (res.length < this.obj_userLoadInfo.pageSize) {
          this.obj_userLoadInfo.is_loadAll = true
        } else {
          this.obj_userLoadInfo.pageNum++
        }
        console.log('个人: ', this.arr_users.length)
      } catch (err) { err }

      this.$hideLoading()
    },
    /**
		 * 加载团队
		 */
    loadTeams(init = false) {
      if (init) {
        this.obj_teamLoadInfo.is_loadAll = false
        this.obj_teamLoadInfo.pageNum = 1
      }
      if (this.obj_teamLoadInfo.is_loadAll) {
        return
      }
      getTeams({
        pageNum: this.obj_teamLoadInfo.pageNum,
        pageSize: this.obj_teamLoadInfo.pageSize
      })
        .then(res => {
          if (init) {
            this.arr_teams = []
          }
          this.arr_teams = this.arr_teams.concat(res)
          /* 判断是否加载全部 */
          if (res.length < this.obj_teamLoadInfo.pageSize) {
            this.obj_teamLoadInfo.is_loadAll = true
          } else {
            this.obj_teamLoadInfo.pageNum++
          }
          console.log('团队: ', res.length)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.talents {
  margin: 10px 10px 0 10px;

  .filters {
    display: flex;
    align-items: flex-end;
    padding: 0 10px;

    .sort {
      position: relative;
      display: flex;
      align-items: flex-end;

      .item {
        width: 60px;
        padding: 5px 0;
        text-align: center;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;

        .iconfont {
          font-size: 22rpx;
        }

        &.active {
          font-weight: 700;
          color: $primary2;
          background-color: #ffffff;
        }
      }
    }

    .search {
      flex: 1;
      margin-bottom: 5px;
      margin-left: 10px;
    }
  }

  .users {
    padding: 0 10px;

    /* 用户卡片 */

    .user-card {
      display: flex;
      padding: 10px;
      margin-bottom: 10px;
      background-color: #ffffff;
      border-radius: 8px;

      &.first:first-of-type {
        border-top-left-radius: 0;
      }

      .right {
        position: relative;
        flex: auto;
        margin-left: 10px;

        .name {
          font-size: $sNormal;
          color: $dark2;
        }

        .level {
          position: absolute;
          top: 0;
          right: 0;
        }

        .tags {
          display: flex;
          flex-wrap: nowrap;
          padding: 5px 0;
          overflow-x: auto;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        .footer {
          display: flex;

          .experience {
            display: flex;
            flex: auto;
            flex-direction: column;
            align-items: flex-start;
            height: 18px;
            overflow: hidden;

            .item {
              flex-shrink: 0;
              height: 18px;
              padding: 0 10px;
              margin-bottom: 5px;
              overflow: hidden;
              font-size: $sMini;
              line-height: 18px;
              text-overflow: ellipsis;
              background-color: $primary4;
              border-radius: 22px;
              transition: 0.5s ease-in-out;
            }
          }

          .love {
            display: flex;
            align-items: center;
            margin-left: 5px;
            font-size: $sMini;
            color: #e86452;

            .iconfont {
              margin-right: 2px;
              font-size: $sMini;
            }
          }
        }
      }
    }
  }

  .teams {
    padding: 0 10px;

    navigator {
      display: block;
    }
  }

  .remark {
    color: $gray2;
  }
}
</style>
